.rt-Homepage-container {
  display: flex;
  flex-direction: column;
  .-wrapper {
    width: 80%;
    margin: 0 auto;
  }
  header {
    box-shadow: 0 4px 10px #E3E3E3;
    z-index: 20;
    .-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    nav {
      display: flex;
      align-items: center;
      color: #474E5D;
      font-size: 16px;
      i {
        padding-right: 7px;
      }
      & > div {
        padding: 16px 42px;
      }
      .-highlight {
        background-color: #EBF2F7;
      }
    }
  }
  .-body-content {
    flex: 1;
    display: flex;
    background-color: #F2F2F2;
    .-wrapper {
      display: flex;
    }
    nav {
      width: 240px;
      background-color: #EBF2F7;
      display: flex;
      flex-direction: column;
      .-rest {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
      }
      .rt-account-box {
        display: flex;
        align-items: center;
        background-color: #42A2E8;
        color: #fff;
        font-size: 12px;
        padding: 10px 8px 9px 16px;
        flex-shrink: 0;
        z-index: 20;
        strong {
          font-size: 16px;
        }
        .-phone-number {
          font-weight: bold;
          padding-right: 9px;
        }
        .-middle-side {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .-above {
            display: flex;
            align-items: center;
          }
        }
        .-right-side {
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            width: 30px;
            line-height: 30px;
            border-radius: 50%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, .5);
          }
        }
      }
      .rt-nav-title {
        border: 1px solid #E3ECF6;
        line-height: 56px;
        background-color: #F5F9FB;
        color: #474E5D;
        font-size: 16px;
        padding-left: 26px;
        &.-active {
          background-color: #fff;
        }
      }
      .-qr-code {
        align-self: center;
        margin: 20px 0;
      }
    }
    .-main-box {
      flex: 1;
      background-color: #fff;
      padding: 0 52px 0 52px;
      display: flex;
      flex-direction: column;
      h3 {
        font-size: 24px;
        color: #474E5D;
      }
      .-separate-2-line {
        border: 1px dashed #E6E6E6;
        height: 3px;
      }
      .rt-order-box {
        border: 1px solid #E0E8EF;
        font-size: 14px;
        color: #474E5D;
        background-color: #F4F8FC;
        padding-top: 35px;
        margin: 6px 0 0 0;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        .-row {
          display: flex;
          padding: 0 0 18px 0;
          flex-shrink: 0;
          &.-adjust {
            padding-bottom: 0;
            .-right-side {
              display: flex;
              flex-direction: column;
              flex: 1;
            }
          }
          &.-pt {
            padding-top: 20px;
          }
          .-step-info {
            border-left: 1px solid #8A8A8A;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            padding: 0 0 22px 21px;
            position: relative;
            &:first-child {
              &::before {
                background-color: #2799EB;
                width: 12px;
                height: 12px;
                left: -6px;
              }
            }
            &:last-child {
              border-left: 0;
              left: 1px;
            }
            &::before {
              position: absolute;
              content: '';
              left: -4px;
              top: 0;
              width: 7px;
              height: 7px;
              background-color: #8A8A8A;
              border-radius: 50%;
            }
            time {
              color: #8A8A8A;
              padding-top: 6px;
            }
          }
          & > span {
            width: 18%;
            text-align: right;
          }
          .-sm-font {
            font-size: 12px;
          }
          .-diff-font {
            font-size: 16px;
            color: #393A3F;
            padding-left: 23px;
          }
          .-right-side {
            flex: 1;
            padding-left: 18px;
            .-phone-number {
              padding: 0 30px 0 20px;
            }
          }
        }
      }
      p {
        font-size: 12px;
        color: #474E5D;
      }
    }
  }
  footer {
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: #474E5D;
    line-height: 50px;
  }
}